import React, { useEffect } from 'react'
import { View, Input, ScrollView } from '@tarojs/components'
import SearchBar from './components/searchBar'
import History from './components/history'
import Host from './components/host'
import { debounce } from '@/utils/utils';
import { Observer, useLocalStore } from 'mobx-react-lite'
import './index.scss'
import { SearchModel } from '@/model/SearchModel'
import { GoodEle, Direction } from '@/components/Good'
import { cartModel } from '@/model/CartModel'
import Cart from '@/components/Cart'
import { Icon } from "@/components/Icon";
import { Empty } from '@/components/Empty';


export default () => {

  const store = useLocalStore(() => SearchModel)
  const cartStore = useLocalStore(() => cartModel)
  useEffect(() => {
    store.getData();
    console.log(store.items);
  })



  return (
    <Observer>
      {
        () => {
          return <View className='xxm-page-search'>
            <View className='xxm-search-bar'>
              <View className='xxm-input-group'>
                <Icon name='search' size={18} color='#999' />
                <Input
                  className='xxm-input'
                  value={store.keyword}
                  placeholder='请输入关键词'
                  onInput={(e) => debounce(store.setKeyword(e.detail.value), 500)}
                ></Input>
                {
                  store.keyword &&
                  <Icon name='close'
                    onClick={() => store.clearKeyword()}
                    size={18}
                    color='#999'
                  />
                }
              </View>
              <View
                className='xxm-text'
                onClick={() => {
                  store.searchGood(store.keyword)
                }}
              >
                搜索
              </View>
              {
                (!store.hasSearch && store.keyword) &&
                <View className="xxm-search-list xxm-hairline--top">
                  {
                    store.searchList.map((it: any, idx: number) => (
                      <View
                        key={idx}
                        className="xxm-search-li xxm-hairline--bottom"
                        onClick={() => {
                          store.searchGood(it.keyword)
                        }}
                      >
                        <Icon name='search' size={16} color='#999' />
                        <View className="txt">{it.keyword}</View>
                      </View>
                    ))
                  }
                </View>
              }
            </View>
            <View className='xxm-search-content'>

              {
                (!store.hasSearch && store.historyKeywords.length > 0) &&
                <View className='xxm-search-hot'>
                  <View className='xxm-hot-title'>
                    历史搜索
                  </View>
                  <View className='xxm-hot-content'>
                    {
                      store.historyKeywords.map((it: any, idx: number) => {
                        return (
                          <View
                            className='xxm-hot-item'
                            key={idx}
                            onClick={() => {
                              store.searchGood(it.keyword)
                            }}
                          >
                            {it.keyword}
                          </View>
                        )
                      })
                    }
                  </View>
                </View>
              }

              {
                (!store.hasSearch && store.hotKeywords.length > 0) &&
                <View className='xxm-hot-container'>

                  <View className='xxm-search-hot'>
                    <View className='xxm-hot-title'>
                      热门搜索
                      </View>
                    <View className='xxm-hot-content'>
                      {
                        store.hotKeywords.map((it: any, idx: number) => {
                          return (
                            <View
                              className='xxm-hot-item'
                              key={idx}
                              onClick={() => {
                                store.searchGood(it.keyword)
                              }}
                            >
                              {it.keyword}
                            </View>
                          )
                        })
                      }
                    </View>
                  </View>
                </View>
              }
              {
                store.hasSearch &&
                <View className="xxm-page-search__view">
                  <ScrollView scrollY style={{ height: '100%' }}>
                    {store.goods.map((it, idx) => {
                      return (
                        <Observer key={it.id}>
                          {() =>
                            <GoodEle
                              direction={Direction.ROW}
                              img={it.main_pic}
                              title={it.nick || it.name}
                              desc={it.brief}
                              price={it.price}
                              oldPrice={it.market_price}
                              id={it.id}
                              discount={it.dis}
                              customStyle={{ paddingRight: '13px' }}
                              number={it.num && it.num || 0}
                              onAdd={async (num) => {
                                const ans = await cartStore.addCart({
                                  number: num,
                                  Good: it
                                })
                                return ans;
                              }}
                            />
                          }
                        </Observer>

                      )

                    })}
                    {
                      !store.goods.length &&
                      <Empty
                        img="http://xmmi.oss-cn-beijing.aliyuncs.com/icon/no-data.png"
                        desc="暂无相关数据"
                      />
                    }
                  </ScrollView>
                </View>
              }
            </View>
            <Cart visible></Cart>
          </View>
        }
      }
    </Observer>
  )


}
